<template>
  <div class="select">
    <div>
      <el-select size="medium" placeholder="请选择单位" v-model="unitId" @change="onUnitChange" clearable filterable>
        <el-option
          v-for="item in unitList"
          :key="item.orgId"
          :label="item.orgName"
          :value="item.orgId"
          clearable></el-option>
      </el-select>
    </div>
    <div v-if="unitOrgList.length">
      <el-select size="medium" placeholder="请选择支部" v-model="orgId" @change="onUnitOrgChange" clearable filterable>
        <el-option
          v-for="item in unitOrgList"
          :key="item.id"
          :label="item.orgName"
          :value="item.id"
          clearable></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { getUnitOrgListApi } from '@api/modules/partyOrg.js'
export default {
  name: 'UnitOrgSelect',
  components: {},
  props: {
    pageData: {
      type: Object,
    },
  },
  data() {
    return {
      unitId: '',
      orgId: '',
      unitList: [],
      unitOrgList: [],
    }
  },
  computed: {
    ...mapGetters('account', ['getUnitList']),
  },
  watch: {
    'pageData.unitId': {
      handler(newVal) {
        this.unitId = newVal
      },
      deep: true,
    },
    'pageData.orgId': {
      handler(newVal) {
        this.orgId = newVal
        if (this.orgId && this.unitOrgList.length === 0) {
          this.getUnitOrgListData()
        }
      },
      deep: true,
    },
  },
  created() {
    this.getUnitListData()
    // this.getUnitOrgListData()
    this.unitList = this.getUnitList
  },
  mounted() {},
  methods: {
    ...mapActions('account', ['setUnitList']),
    // 获取单位信息
    async getUnitListData() {
      await this.setUnitList()
      this.unitList = this.getUnitList
    },
    // 监听单位改变
    onUnitChange(e) {
      this.orgId = ''
      this.getUnitOrgListData()
      this.$emit('unitSelectChange', { unitId: this.unitId, orgId: this.orgId, unitChange: true })
    },
    // 监听支部改变
    onUnitOrgChange() {
      this.$emit('unitSelectChange', { unitId: this.unitId, orgId: this.orgId, orgChange: true })
    },
    // 获取支部单位
    async getUnitOrgListData() {
      // this.orgId = ''
      const res = await getUnitOrgListApi({ unitId: this.unitId || '-1' })
      this.unitOrgList = res.data
    },
  },
}
</script>
<style lang="scss" scoped>
.select {
  display: flex;
}
// /deep/.el-select,
// /deep/.el-input {
//   width: 100%;
// }
</style>
